<template>
  <div class="menu-list">
    <router-link id="btn" to="/index/adminadd">
      <el-button type="primary">
        <i class="el-icon-circle-plus-outline"></i>添加
      </el-button>
    </router-link>
    <div class="table-box">
      <!-- data表格的数据 -->
      <!-- default-expand-all：默认展开全部 -->
      <!-- tree-props：树形数据 -->
      <!-- row-key：行数据的 Key，用来优化 Table 的渲染； -->
      <!-- <el-table :data="list" row-key="id" :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"> -->
      <el-table
        :data="tableData"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- prop：就是每一列对应的数据的字段 -->
        <!-- label：就是每一列对应的标题 -->
        <el-table-column prop="uid" label="用户ID"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="rolename" label="角色名称">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-if="scope.row.status == 2">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑按钮，需要传id，id是变量，所以需要用作用域插槽 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="edit(scope.row.uid)"
            ></el-button>
            <!-- 删除按钮，需要传id -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="del(scope.row.uid)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- current-change：是一个事件，触发后会修改当前页码 -->
    <!-- page-size：每一页有几条数据 -->
    <!-- current-page.sync：同步的值，当前页码 -->
    <!-- layout：分页组件中显示哪些功能，比如上一页、下一页、跳转等 -->
    <!-- total：数据总条数 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {userCount} from '../../http'
export default {
  data() {
    return {
      // 表格中的数据
      tableData: [],
      // 当前页码，默认为1
      currentPage: 1,
      // 数据总条数
      total: 1,
      // 每页几条
      pageSize: 2
    };
  },
  // 获取tabledata，渲染页面
  created() {
    // 获取管理员总条数
    this.getTotalData();
    this.getTabledata();
  },
  methods: {
    // 获取数据总条数
    async getTotalData() {
      let num = await userCount()
      this.total = num;
    },
    // 获取table的数据
    getTabledata() {
      // size：每页几条
      // page：第几页
      this.$http("/userlist",{params: {size:this.pageSize,page:this.currentPage}}).then((res) => {
        this.tableData = res.data.list;
      });
    },
    edit(uid) {
      // 去编辑页面。使用动态路由，因为每一个菜单要去的页面中的内容都一样
      // 这里还用到了嵌套路由，所以需要将父路由和子路由拼起来
      this.$router.push('/index/menu/'+uid);
    },
    del(uid) {
      // 去删除，先弹窗，需要二次确认，点击确认按钮才会真的删除。避免用户误操作
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 点击确定按钮，才能真的发请求
          this.$http.post("/menudelete", { uid: uid }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
            // 获取最新的数据,方便更新页面
            this.getTabledata()
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页-点击页码按钮，修改当前页码
    handleCurrentChange(val) {
      // 根据最新页码数，发请求获取新的数据
      this.getTabledata()
    }
  },
};
</script>

<style>
.table-box {
  padding-top: 40px;
}
</style>